<template>
    <div>
        <div style="margin-top:2.5rem;">
            <navtop :title="'用户注册'"></navtop>
        </div>
        <div class="fromContainer">
            <div class="username">
                <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
            </div>
            <div class="password">
                <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
            </div>
            <div class="checkpassword">
                <mt-field label="密码" placeholder="请确认密码" type="password" v-model="chaeckpassword"></mt-field>
            </div>
            <div class="phone">
                <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
            </div>
            <div class="btns">
                <mt-button size="normal" type="primary" @click="register" plain>注册</mt-button>
                <mt-button size="normal" type="danger" @click="cancel" plain>取消</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import navtop from "../navtop/nav.vue";
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            username: null,
            password: null,
            chaeckpassword: null,
            phone: null
        };
    },
    methods: {
        // 注册
        register() {
            if (
                this.password.length > 3 &&
                this.chaeckpassword.length > 5 &&
                this.phone.length == 11
            ) {
                if (this.password == this.chaeckpassword) {
                    let userInfos = {
                        username: this.username,
                        password: this.password,
                        mobile: this.phone
                    };
                    this.$ajax.post("/user/", userInfos).then(res => {
                        Toast({
                            message: "注册成功！请登录",
                            position: "top"
                        });
                        this.$router.push({ name: "login" });
                    });
                } else {
                    Toast({
                        message: "两次密码不一致",
                        position: "top"
                    });
                }
            } else {
                Toast({
                    message: "未输入或过短",
                    position: "top"
                });
            }
        },
        //取消注册
        cancel() {
            this.$router.push({ name: "home" });
        }
    },
    components: {
        navtop
    }
};
</script>


<style lang="scss" scoped>
.fromContainer {
    margin-top: 30%;
    .password {
        margin-top: 20px;
    }
    .checkpassword {
        margin-top: 20px;
    }
    .phone {
        margin-top: 20px;
    }
    .btns {
        margin-top: 25px;
        display: flex;
        justify-content: space-around;
    }
}
</style>